<template>
    <div class="content">
        <headerSetCom>
            <template #title-content>
                <div>
                    <van-search  shape="round" placeholder="请输入搜索关键词" class="search" />
                </div>
            </template>
        </headerSetCom>
        <div class="heade" v-for="item in listen" :key="item.id">
            <div class="title">
                <h3>精选游记</h3>
            </div>
            <div class="banner">
                <van-swipe :autoplay="3000" lazy-render >
                    <van-swipe-item v-for="image in bannerListen" :key="image" class="banner_item">
                        <img :src="image" />
                    </van-swipe-item>
                   
                </van-swipe>
              <div class="box" style="text-align: center;">
                <p>{{ item.carousel_descriptions[0] }}{{ item.carousel_descriptions[1] }}</p>
                <p>{{ formatDate(item.journey_date) }}</p>
              </div>
            </div>
        </div>
        <div class="main">
            <div class="main_title">
                <p>全部游记</p>
            </div>
            <ul>
                <li v-for="item in listen" :key="item.id" class="items_title">
                    <div class="left">
                        <div class="top">
                            <p>{{ item.all_journey_text }}</p>
                        </div>
                        <div class="bottom">
                            {{ userId }}
                        </div>
                    </div>
                    <div class="right">
                        <van-image :src="item.journey_image"></van-image>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>


<script lang="ts" setup>
import headerSetCom from '@/components/headerSetCom/headerSetCom.vue';
import { featuredPourneysFn } from '@/API/wachyj';
import { onMounted, ref } from 'vue';

const bannerListen = ref() //轮播图数据
const listen = ref() //全部数据
const userId = localStorage.getItem('username') || ''

onMounted(() => {
    featuredPourneysFn().then(res => {
        console.log(res.data)
        for (let i = 0; i < res.data.length; i++) {
            const banner = res.data[i].carousel_images
            bannerListen.value = banner
        }
        listen.value = res.data

    })
})


// 格式化日期的函数
const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleString(); // 格式化为本地字符串
};
</script>



<style scoped lang="scss">

.content{
    display: flex;
    flex-direction: column;
}
.search {
    width: 3.5rem;
    // border-radius: 50%;  
}

.heade {
    height: 3rem;
    // background-color: red;
    padding: 0 0.2rem;
    display: flex;
    flex-direction: column;

    .title{
        height: 0.2rem;
        // background-color: red;
        font-size: 0.3rem;
    }
    .banner{
        margin-top: 0.6rem;
        flex: 1;
        background-color: #fff;
        // padding: 0.2rem;
       
        border-radius: 0.2rem;

       

        .banner_item{
            height: 1.5rem;
            border-radius: 0.2rem;
           
            .img{
            width: 100%;
            height: 60%;
            border-radius: 0.2rem;
            
        }

        }
        

    }
}

.main{
    background-color: #fff;
    flex: 1;
    margin-top: 0.5rem;
    padding-left: 0.2rem;
}

.items_title{
    display: flex;

    .left{
        flex: 2;
        background-color: red;
    }
    .right{
        flex: 1;
    }
}

</style>